<template>
  <div class="sql-senior-operation">
    <div v-for="(table,index) in TableNames" :key="index" class="sql-senior-operation-item">
      <div>{{ table.TableName }}({{ table.TableAlias }})</div>
      <el-button @click="GenSqlBtn(table,'add')" text type="success">新增</el-button>
      <el-button @click="GenSqlBtn(table,'sel')" text type="primary">查询</el-button>
      <el-button @click="GenSqlBtn(table,'upd')" text type="warning">修改</el-button>
      <el-button @click="GenSqlBtn(table,'del')" text type="danger">删除</el-button>
      <el-button @click="GenSqlBtn(table,'info')" text type="info">字段详情</el-button>
    </div>
    <div v-if="ShowInfo" style="user-select: text">
      <el-table :data="FieldInfo" style="width: 100%">
        <el-table-column prop="Column" label="字段" width="180"/>
        <el-table-column prop="Alias" label="别名"/>
        <el-table-column prop="type" label="类型"/>
        <el-table-column prop="notnull" label="非空"/>
        <el-table-column prop="pk" label="主键"/>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">

import {onMounted, ref} from "vue";
// @ts-ignore
import {DataManage} from "@/api/DataManageApi.ts";

const Emits = defineEmits(["close"])
const TableNames = ref([])
const FieldInfo = ref([])
const ShowInfo = ref(false)

/**
 *
 * @param table
 * @param operation
 * @constructor
 */
const GenSqlBtn = (table: any, operation: string) => {
  if (operation === 'info') {
    ShowInfo.value = true
  }

  let SqlResult = ''
  LoadFields(table.TableName, (Fields: any) => {
   const _Fields = Fields.Data;
    FieldInfo.value = _Fields;
    if (operation === 'add') {
      SqlResult = ' INSERT INTO ' + table.TableName + ' ';
      let vs = [];
      let fieldName = [];
      let fieldIndex = 0;
      for (let field of _Fields) {
        fieldName.push(field.name)
        vs.push('{' + fieldIndex + '}')
        ++fieldIndex
      }
      SqlResult += ' (' + fieldName.join(' , ') + ')' + ' VALUES ( ' + vs.join(' , ') + ' )'
    }
    if (operation === 'sel') {
      SqlResult = 'SELECT * FROM ' + table.TableName + ' where ';
      let fieldIndex = 0;
      let where = [];
      for (let field of _Fields) {
        where.push(field.name + '= {' + fieldIndex + '}')
        ++fieldIndex
      }
      SqlResult += where.join(' and ')
    }
    if (operation === 'upd') {
      SqlResult = 'UPDATE ' + table.TableName + ' set ';
      let fieldIndex = 0;
      let where = [];
      for (let field of _Fields) {
        where.push(field.name + '= {' + fieldIndex + '}')
        ++fieldIndex
      }
      SqlResult += where.join(' , ') + ' where id = {0}'
    }
    if (operation === 'del') {
      SqlResult = 'DELETE FROM students ' + table.TableName + ' WHERE id ={0}'
    }
    if (operation !== 'info') {
      Emits('close', {SqlResult: SqlResult, Fields: _Fields})
    }
  })
}

/**
 * 加载表字段
 * @param TableName
 * @param Callback
 * @constructor
 */
const LoadFields = (TableName: string, Callback: Function) => {
  DataManage.FindTableStructures(TableName).then((res: any) => {
    Callback(res)
  })
}

/**
 * 加载表
 * @constructor
 */
const LoadTables = () => {
  DataManage.FindSystemDatabaseTableNames().then((res: any) => {
    TableNames.value = res.Data
  })
}
onMounted(() => {
  ShowInfo.value = false
  LoadTables()
})
</script>

<style scoped lang="scss">
.sql-senior-operation {
  .sql-senior-operation-item {
    border: 1px solid #c8c8c8;
    margin: 10px 0;
    display: flex;
    align-items: center;
    padding-left: 8px;
  }
}

</style>
